<template>
	<div id="login" v-loading="loading" element-loading-text="Loading...">
    <main>
      	<h3>CakeShop后台管理系统</h3>
        <li><input type="text" v-model="userName" placeholder="请输入用户名" /></li>
        <li><input type="password" v-model="userPwd" placeholder="请输入密码" /></li>
        <li>
          <input type="text" v-model="captcha" @keyup.enter="login()" placeholder="请输入验证码"/>
          <img :src="baseimg" @click="getCode()">
        </li>
      	<!-- <button><router-link to="/home">登录</router-link></button> -->
        <button @click="login">登录</button>
    </main>
	</div>
</template>
<script>
//引入nanoid
import {nanoid} from  'nanoid'

export default {
		name: "Login",
		components: {},
		props: {},
		data() {
			return {
				userName: "",
				userPwd: "",
        //验证码
        captcha: "",
        //唯一值
        uuid:"",
        //图片路径
        baseimg: "",
				loading: false,
        captchaEntity : {}
			};
		},
		created() {
      this.getCode();
    },
		mounted() {
    },
		methods: {
      //获取验证码
      getCode(){
        // 更新数据
        let uuid = nanoid();
        this.uuid = uuid,
        this.baseimg = `/api/CakeShop/captcha?uuid=${uuid}`
        console.log(this.baseimg)
      },

			login() {
				var self = this;
				this.loading = true;
				if (self.userName === "" || self.userPwd === "") {
					self.$message({
						duration: 1500,
						message: "用户名或密码不能为空!",
						type: "error",
						onClose: function() {
							self.loading = false;
						},
					});
				} else {
					this.$http.post("/api/CakeShop/login", {
							userCode: self.userName,
							userPass: self.userPwd,
              captchaEntity : {
                code: self.captcha,
                uuid: self.uuid,
              }
						})
						.then(
							function(res) {
                console.log(res)
								if (res.data.info == null|| res.data.info === {}) {
									self.$message({
										message: res.data.msg,
										type: "error",
										onClose: function() {
											self.loading = false;
                      self.getCode();
										},
									});
								} else {
                  console.log(res)
                  if(res.data.info.role === 1 || res.data.info.role === 2){
                    self.$message({
                    	message: res.data.msg,
                    	type: "success",
                    	onClose: function() {
                    		self.loading = false;
                    		//跳转之前 把用户信息存储起来
                    		//cookie、session、localStorage  sessionStorage 区别？
                    		sessionStorage.setItem("manager",JSON.stringify(res.data.info))
                        var manager = JSON.parse(sessionStorage.getItem("manager"))
                        sessionStorage.setItem("admin",manager.userCode)
                    		self.$router.push({
                    			path: "/home"
                    		});
                    	},
                    });
                  }else{
                    self.$message({
                    	message: res.data.msg,
                    	type: "error",
                    	onClose: function() {
                    		self.loading = false;
                        self.getCode();
                    	},
                    });
                  }
								}
							},
							function(err) {}
						);
				}
			},
		},
	};
</script>

<style scoped>
	#login {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: url(../../assets/loginbg.png) no-repeat 0 0;
		background-size: 100% 100%;
	}

	#login main {
		width: 400px;
		margin: 0 auto;
		background: rgba(255,255,255,0.7);
		padding: 20px 25px;
		box-sizing: border-box;
		border-radius: 5px;
	}

	#login h3 {
		text-align: center;
		margin-bottom: 20px;
		font-size: 28px;
		color: #f97487;
	}

  #login li{
    list-style: none;
    width: 100%;
    margin:10px 0 20px;
    display: flex;
  }

	#login li input{
    width: 100%;
		height: 35px;
		border:1px solid #ddd;
		border-radius: 5px;
		padding: 0 10px;
		box-sizing: border-box;
	}

  #login li img{
    width: 100px;
    margin-left: 35px;
    background-color: #FFFFFF;
  }

	#login button{
		width: 100%;
		font-weight: 600;
		color: #FFFFFF;
		border:0 none;
		background: #f97487;
		padding: 10px 0;
		border-radius: 5px;
	}
</style>
